<template>
    <view>
        <z-paging ref="dataPagingRef" :fixed="true" use-virtual-list :force-close-inner-list="true" cell-height-mode="dynamic" @virtualListChange="virtualListChange" @query="loadData" :auto="true">
            <template #top>
                <view class="snowy-z-paging-item">
                    <snowy-search placeholder="请输入会议室类型" v-model="searchFormData.type" @confirm="$refs.dataPagingRef.reload()" @clear="$refs.dataPagingRef.reload()" :seniorEnable="true" @seniorSearch="$refs.searchRef.open()"></snowy-search>
                </view>
                <search ref="searchRef" :searchFormData="searchFormData" @confirm="$refs.dataPagingRef.reload()"></search>
            </template>
            <view class="snowy-shadow snowy-z-paging-item snowy-padding snowy-hover" v-for="(item, index) in meetingReservationData" :key="index" @tap="moreTapItem(item, index)">
                <uni-row class="item-uni-row">
                    <uni-col :span="2">
                        <uni-icons size="18" type="paperclip" color="#5677fc"></uni-icons>
                    </uni-col>
                    <uni-col :span="10">
                        <view class="snowy-sub-title">会议室类型</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.type }} </view>
                    </uni-col>
                </uni-row>
                <uni-row class="item-uni-row">
                    <uni-col :span="2">
                        <uni-icons size="18" type="paperclip" color="#5677fc"></uni-icons>
                    </uni-col>
                    <uni-col :span="10">
                        <view class="snowy-sub-title">会议室门牌号</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.meetingRoomName }} </view>
                    </uni-col>
                </uni-row>
                <uni-row class="item-uni-row">
                    <uni-col :span="2">
                        <uni-icons size="18" type="paperclip" color="#5677fc"></uni-icons>
                    </uni-col>
                    <uni-col :span="10">
                        <view class="snowy-sub-title">预约用户名</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.userName }} </view>
                    </uni-col>
                </uni-row>
                <uni-row class="item-uni-row">
                    <uni-col :span="2">
                        <uni-icons size="18" type="paperclip" color="#5677fc"></uni-icons>
                    </uni-col>
                    <uni-col :span="10">
                        <view class="snowy-sub-title">预约日期</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.reservationDate }} </view>
                    </uni-col>
                </uni-row>
                <uni-row class="item-uni-row">
                    <uni-col :span="2">
                        <uni-icons size="18" type="paperclip" color="#5677fc"></uni-icons>
                    </uni-col>
                    <uni-col :span="10">
                        <view class="snowy-sub-title">预约时间段</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.timeSlot }} </view>
                    </uni-col>
                </uni-row>
                <uni-row class="item-uni-row">
                    <uni-col :span="2">
                        <uni-icons size="18" type="paperclip" color="#5677fc"></uni-icons>
                    </uni-col>
                    <uni-col :span="10">
                        <view class="snowy-sub-title">使用目的</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.purpose }} </view>
                    </uni-col>
                </uni-row>
                <uni-row class="item-uni-row">
                    <uni-col :span="2">
                        <uni-icons size="18" type="paperclip" color="#5677fc"></uni-icons>
                    </uni-col>
                    <uni-col :span="10">
                        <view class="snowy-sub-title">审批备注</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.approvalRemark }} </view>
                    </uni-col>
                </uni-row>
            </view>
        </z-paging>
        <snowy-float-btn v-if="$snowy.hasPerm('mobileMeetingReservationAdd')" @click="add"></snowy-float-btn>
        <more ref="moreRef" @handleOk="loadData(true)"></more>
    </view>
</template>

<script setup name="meetingreservation">
    import search from './search.vue'
    import meetingReservationApi from '@/api/biz/meeting-reservation-api'
    import more from './more.vue'
    import { onLoad, onShow, onReady, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
    import { reactive, ref, getCurrentInstance, nextTick } from "vue"

    const { proxy } = getCurrentInstance()
    const dataPagingRef = ref()
    const searchFormData = ref({})
    const meetingReservationData = ref([])
    const virtualListChange = (vList) => {
        meetingReservationData.value = vList
    }
    const loadData = async (pageNo, pageSize) => {
        const parameter = {
            current: pageNo,
            size: pageSize
        }
        Object.assign(parameter, searchFormData.value)
        const data = await meetingReservationApi.meetingReservationPage(parameter)
        dataPagingRef.value.complete(data?.records)
    }
    onShow(() => {
        uni.$once('formBack', (data) => {
            nextTick(() => {
            	dataPagingRef.value.reload()
            })
        })
    })
    // 新增
    const add = () => {
        uni.navigateTo({
            url: '/pages/biz/meetingreservation/form'
        })
    }
    // 更多操作
    const moreRef = ref()
    const moreTapItem = (item, index) => {
        moreRef.value.open(item)
    }
</script>

<style lang="scss" scoped>
    @import '@/static/scss/index.scss';
    ::v-deep .uni-row {
        @extend .snowy-flex-v-center;
        padding: 5rpx;
    }
</style>
